<template>
    <v-card height="320">
        <v-card-title><h4>添加组员信息</h4></v-card-title>
        <v-card-text>
            <v-form v-model="valid">
                <v-container>
                    <v-row>
                        <v-col
                        cols="12"
                        md="3"
                        >
                            <v-text-field
                                v-model="group.group_id"
                                :rules="nameRules"
                                :counter="20"
                                label="组名称"
                                required
                            ></v-text-field>
                        </v-col>

                        <v-col
                        cols="12"
                        md="4"
                        >
                            <v-text-field
                                v-model="group.cn_name"
                                :rules="nameRules"
                                :counter="20"
                                label="姓名"
                                required
                            ></v-text-field>
                        </v-col>

                        <v-col
                        cols="12"
                        md="5"
                        >
                            <v-text-field
                                v-model="group.user"
                                label="账号"
                                :counter="20"
                                required
                            ></v-text-field>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col
                        cols="12"
                        md="3"
                        >
                            <v-text-field
                                v-model="group.phone"
                                :rules="phoneRules"
                                :counter="11"
                                label="手机号"
                                required
                            ></v-text-field>
                        </v-col>

                        <v-col
                        cols="12"
                        md="4"
                        >
                            <v-text-field
                                v-model="group.email"
                                :rules="emailRules"
                                label="E-mail"
                                required
                            ></v-text-field>
                        </v-col>

                        <v-col
                        cols="12"
                        md="5"
                        >
                            <v-text-field
                                v-model="group.pwd"
                                type="password"
                                label="跑定时任务的人填写加密后的密码"
                            ></v-text-field>
                        </v-col>
                    </v-row>
                </v-container>
            </v-form>
        </v-card-text>
        <v-card-action>
            <div style="margin-left:400px">
                <v-btn text color="primary" @click="closeDialog">取消</v-btn>
                <v-btn color="primary" @click="addGroup" small>添加</v-btn>
            </div>
        </v-card-action>
    </v-card>
</template>

<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
    setup() {
        
    },
    props: {
        groupName: {
            type: String,
            default: '',
        },
        group: {
            type: Object,
            default: {
                group_id: '',
                cn_name: '',
                user: '',
                pwd: '',
                phone: '',
                email: '',
            },
        }
    },
    data(){
        return {
            valid: false,
            nameRules: [
                v => !!v || 'value is required',
                v => v.length <= 20 || 'value must less then 20 characters',
            ],
            phoneRules: [
                v => !!v || 'phone is required',
                v => v.length == 11 || 'phone must equal 11 characters',
            ],
            emailRules: [
                v => !!v || 'E-mail is required',
                v => /.+@.+/.test(v) || 'E-mail must be valid',
            ],
        }
    },
    mounted(){
        this.group.group_id = this.groupName
    },
    methods: {
        closeDialog: function(){
            console.log('closeDialog ...')
            this.$emit('closeDialog')
        },
        addGroup: function(){
            let post_data = {'data': this.group}
            if(!this.valid){
                alert('用户名为空')
            }else{
                if(this.group.pwd){
                    let post_data = {'password': this.group.pwd}
                    this.$api.job.passwordEncode(post_data).then(res=>{
                        this.group.pwd = res.data.data
                    })
                }
                this.$api.task.addPerson(post_data).then(res=>{
                    alert(res.data.message)
                })
            } 
        },
    }
})
</script>

<style scoped>

</style>